import React, {Component, Fragment} from 'react';
//{ Component } 相当于 React.Component
import TodoItem from'./TodoItem'

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      inputValue:'',
      list:[]
    }
  }
  render() {
    return (
      //  在react中，以大写字母开头的，为组件
      <Fragment>
        <label htmlFor='int'>输入内容</label>
        {/*ref 获取DOM元素 */}
        <input id='int' ref={(input)=>{this.input=input}} type="text" value={this.state.inputValue} onChange={this.handleChange}/>
        <button onClick={this.handleClick}>搜索</button>
        <ul>
          {this.getTodoList()}
        </ul>
      </Fragment>
    );
  }
  getTodoList=()=>{
    {/*   dangerouslySetInnerHTML 不转义*/}
      return this.state.list.map((item,index)=>{
        return <div key={index}>
          <TodoItem  item={item} index={index} deleteItem={this.handleDel.bind(this)} />
          {/*<li key={index} onClick={this.handleDel.bind(this,index)}*/}
          {/*dangerouslySetInnerHTML={{__html:item}}*/}
          {/*></li>*/}
        </div>
    })
  }
  handleChange=()=>{
    // this.setState({   老版写法
    //   inputValue:e.target.value
    // })

  //  新版写法  当setState 对象变成函数的时候，报错了，就外层设置个变量接收e.target.value。内层中使用这个变量
    //const value=e.target.value
    const value=this.input.value
    this.setState(()=>{
      return {
        inputValue:value
      }
    })
  }
  handleClick=()=>{
    // this.setState({
    //   list:[...this.state.list,this.state.inputValue],
    //   inputValue:''
    // })
    this.setState((prevState)=>{
      return {
        list:[...prevState.list,prevState.inputValue],
        inputValue:''
      }
    })
  }
  handleDel=(index)=>{
   // let list=[...this.state.list];
   // list.splice(index,1)
   //  this.setState({
   //    list:list
   //  })
    this.setState((prevState)=>{
      let list=[...prevState.list];
      list.splice(index,1)
      return {
        list
      }
    })
  }
}

export default App;

// 父组件向子组件，都是通过属性形式传递,既可以传递属性也可以传递方法，子组件通过this.props.xxx来接收。
//子组件向父组件传值,子组件直接通过 this.props.方法名  来调用父组件的方法。不过要注意父组件的this指向、可以通过bind方法来改变this指向
